<template>
    <div class="myContainer">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="基础信息" name="first">
                <el-row class="myBorderBottom myMarginBottom_10px">
                    <el-col :span="7" class="myTitleText">职能任务基本信息</el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        职能任务名称 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="职能任务名称" v-model="plan_title" :readonly="readonly"></el-input>
                    </el-col>
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        当前状态 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="当前状态" v-model="status" :readonly="readonly"></el-input>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        使用模板 :
                    </el-col>
                    <el-col :span="6">
                        <template>
                            <el-select v-model="template_id"
                                       clearable
                                       :disabled="readonly"
                                       placeholder="请选择模板">
                                <el-option
                                    v-for="item in template"
                                    :key="item.template_name"
                                    :label="item.template_name"
                                    :value="item.template_id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        监察人 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="监察人" v-model="plan_pop" :disabled="readonly"
                                  @focus="showRole"></el-input>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        抽检项完成率 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="抽检项完成率" v-model="finish_rate" :readonly="readonly"></el-input>
                    </el-col>
                    <el-col :span="2" class="myLineHeight_40px">
                        %
                    </el-col>
                </el-row>

                <el-row class="myBorderBottom myMarginBottom_10px">
                    <el-col :span="7" class="myTitleText">人员信息</el-col>
                </el-row>
                <el-row v-for="i in pops" v-if="pops">
                    <el-row :gutter="10" class="myMarginBottom_10px">
                        <el-col :span="3" class="myLeftMsg">
                            {{i.type + '责任人'}} :
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="i.charge" :readonly="readonly"></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" class="myMarginBottom_10px">
                        <el-col :span="3" class="myLeftMsg">
                            {{i.type + '处理人'}} :
                        </el-col>
                        <el-col :span="6">
                            <el-input v-model="i.deal" :readonly="readonly"></el-input>
                        </el-col>
                    </el-row>
                </el-row>


                <el-row class="myBorderBottom myMarginBottom_10px">
                    <el-col :span="7" class="myTitleText">执行范围</el-col>
                </el-row>

                <!-- <el-row :gutter="10">
                  <el-col :span="3" class="myLeftMsg">
                    随机选中 :
                  </el-col>
                  <el-col :span="6">
                    <el-slider v-model="sliderValue"></el-slider>
                  </el-col>
                  <el-col :span="3">
                    <el-button type="primary" @click="test">执行</el-button>
                  </el-col>
                </el-row> -->

                <el-row :gutter="10">
                    <el-col :span="6" :offset="3">
                        <el-tree
                            :data="treeData"
                            show-checkbox
                            node-key="value"
                            ref="region"
                            :props="defaultProps"
                            @check-change="getAreaInfo"
                            :default-expanded-keys="[]"
                            :default-checked-keys="[]">
                        </el-tree>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="6" class="myLineHeight_40px" :offset="3">
                        总项目数：{{totalNum}};
                        已选中：{{checkNum}};
                        占比：{{proportionNum}};
                    </el-col>
                </el-row>

                <el-row class="myBorderBottom myMarginBottom_10px">
                    <el-col :span="7" class="myTitleText">时间信息</el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        开始日期 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="开始日期" v-model="start_time" :readonly="readonly"></el-input>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        截止日期 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="截止日期" v-model="end_time" :readonly="readonly"></el-input>
                    </el-col>
                </el-row>

                <el-row class="myBorderBottom myMarginBottom_10px">
                    <el-col :span="7" class="myTitleText">创建信息</el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        创建人 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="创建人" v-model="creator_name" :readonly="readonly"></el-input>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myMarginBottom_10px">
                    <el-col :span="3" class="myLeftMsg">
                        <span class="require myVA_M">*</span>
                        创建时间 :
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="创建时间" v-model="create_time" :readonly="readonly"></el-input>
                    </el-col>
                </el-row>

                <el-row :gutter="10" class="myPaddingTop_10px">
                    <el-col :span="6" :offset="3">
                        <el-button @click="back">返回</el-button>
                    </el-col>
                </el-row>
            </el-tab-pane>

            <el-tab-pane label="任务信息" name="second">
                <el-row :gutter="10">
                    <el-col :span="4">
                        <template>
                            <el-select v-model="typeSelected"
                                       clearable
                                       placeholder="全部考核类型">
                                <el-option
                                    v-for="item in typeOption"
                                    :key="item.type_id"
                                    :label="item.type_name"
                                    :value="item.type_id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="请输入关键词" v-model="kw2"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-col>
                </el-row>

                <el-row class="myPaddingTop_10px">
                    <el-col :span="24">
                        <template>
                            <el-table
                                border
                                :data="list2"
                                :stripe=true
                                v-loading="loading"
                                style="width: 100%">
                                <el-table-column
                                    label="序号"
                                    type="index"
                                    width="55">
                                </el-table-column>
                                <el-table-column
                                    label="考核小区"
                                    prop="area_name">
                                </el-table-column>
                                <el-table-column
                                    label="考核类型"
                                    prop="type_name">
                                </el-table-column>
                                <el-table-column
                                    label="当前状态"
                                    prop="status">
                                    <template scope="scope">
                                        {{ scope.row.status | status }}
                                    </template>
                                </el-table-column>
                                <!--<el-table-column-->
                                <!--label="任务完成度"-->
                                <!--prop="finish_rate">-->
                                <!--</el-table-column>-->
                                <el-table-column
                                    label="责任人"
                                    prop="charger_name">
                                </el-table-column>
                                <el-table-column
                                    label="处理人"
                                    prop="dealer_name">
                                </el-table-column>
                                <el-table-column
                                    label="功能操作"
                                    width="120">
                                    <template scope="scope">
                                        <el-button class="look" type="text" size="small"
                                                   @click="goinfo(scope.row.task_id)">详情
                                        </el-button>
                                        <span v-if="scope.row.status!=4">| <el-button class="look" type="text"
                                                                                      size="small"
                                                                                      @click="getPerson(scope.row.task_id,1,scope.row.dealer_name,scope.row.dealer_id,scope.row.dealer_phone)">改派</el-button>
                    </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-col>
                </el-row>
                <el-row :gutter="10" class="myPaddingTop_10px">
                    <el-col :span="6">
                        <el-button @click="back">返回</el-button>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>


        <!--计划监察人角色职务弹出框 start-->
        <el-dialog title="计划监察人角色/职务" class="myRoleDialog" :visible.sync="newRoleDialogVisible">
            <div>
                <el-input placeholder="输入关键字进行搜索" v-model="kw" class="input-with-select">
                    <el-button type="primary" slot="append" class="el-icon-search"></el-button>
                </el-input>
            </div>
            <div class="mymarginTop_10px myOV_y_400px">
                <el-tree
                    ref="roleData"
                    v-loading="roleDataListLoading"
                    :data="roleDataList"
                    node-key="role_id"
                    :props="RoleDataProps"
                    :filter-node-method="filterNode"
                    show-checkbox>
                </el-tree>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="myBgGreen" @click="setDeptRoleInfo">提 交</el-button>
                <el-button @click="newRoleDialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <!--计划监察人角色职务弹出框 end-->

        <el-dialog title="人员指派" class="myRoleDialog" :visible.sync="newPersonDialogVisible">
            <el-row :gutter="10">
                <el-col :span="20">
                    <el-input placeholder="输入关键词" v-model="kw_person" autofocus></el-input>
                </el-col>
                <el-col :span="4" class="myTextAlignRight">
                    <el-button type="primary" class="myBgGreen" @click="onSearchPerson">查询</el-button>
                </el-col>
            </el-row>
            <div class="myPaddingTop_10px">
                <el-tree
                    key="personDlg"
                    class="myOV_y_400px"
                    ref="personDlg"
                    v-loading="personLoading"
                    :data="personDlgList"
                    :props="personDlgProps"
                    node-key="staff_id"
                    @check-change="onChange"
                    :render-content="renderContent"
                    show-checkbox>
                </el-tree>
            </div>
            <el-row>
                已选人员：
            </el-row>
            <el-row>
                <el-tag v-for="dealer in personNameList.split(',')" v-if="dealer.length > 0"
                        closable
                        @close="deleteDealer(dealer)">{{dealer}}
                </el-tag>
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button @click="handlePersonClick" type="primary" class="myBgGreen">确 定</el-button>
                <el-button @click="newPersonDialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>


        <!-- <el-dialog title="选择人员" width="40%" class="myRoleDialog" :visible.sync="newPersonDialogVisible">
          <el-row :gutter="10">
            <el-col :span="20">
              <el-input placeholder="输入关键词" v-model="kw_person" autofocus></el-input>
            </el-col>
            <el-col :span="4" class="myTextAlignRight">
              <el-button type="primary" class="myBgGreen" @click="onSearchPerson">查询</el-button>
            </el-col>
          </el-row>
          <div class="myPaddingTop_10px">
            <template>
              <el-transfer
                v-model="personvalue"
                :props="{
                  key: 'staff_id',
                  label: 'user_name'
                }"
                :data="personDlgList">
              </el-transfer>
            </template>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="newPersonDialogVisible = false">取 消</el-button>
            <el-button @click="handlePersonClick" type="primary" class="myBgGreen">确 定</el-button>
          </div>
        </el-dialog> -->
    </div>
</template>

<style scoped>
    .myBorderBottom {
        border-bottom: 1px dotted #dbdbdb;
        padding-bottom: 5px;
    }

    .myTextAlignRight {
        text-align: right;
    }

    .myContainer {
        background: #fff;
        padding: 10px;
    }

    .myTitleText {
        font-weight: 500;
        font-size: 16px;
    }

    .myLineHeight_40px {
        line-height: 40px;
    }

    .myPaddingTop_10px {
        padding-top: 10px;
    }

    .myred {
        color: #f00;
        font-size: 12px;
    }

    .myMarginBottom_10px {
        margin-bottom: 10px;
    }

    .myLeftMsg {
        line-height: 40px;
        text-align: right;
    }

    .myVA_M {
        vertical-align: middle;
    }

    .mymarginTop_10px {
        margin-top: 10px;
    }

    .myOV_y_400px {
        max-height: 400px;
        min-height: 200px;
        overflow-y: scroll;
        border: 1px solid #d1dbe5;
    }
</style>

<script>
    import {getAreaTree} from '@/api/area';
    import {
        addPlan,
        getTemplateList,
        infoPlan,
        updatePlan,
        createTask,
        infoPlanTask,
        getTypeList,
        reassignment,
        reassignmentDealer
    } from '@/api/quality';
    import {getRoleList} from '@/api/role';
    import {getStaffList} from '@/api/staff';
    export default {
        data() {
            return {
                title: "计划详细",
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    }
                },
                type: "",
                id: "",
                readonly: false,
                radio: 1,
                template_id: "",
                template: [],
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                gen_type: "",
                task: [
                    {label: "周期性", value: 1},
                    {label: "临时性", value: 0}
                ],
                sliderValue: 0,
                totalNum: 0,
                checkNum: 0,
                proportionNum: 0,
                deadline: "",
                finish_rate: "",
                first_date: "",
                plan_cycle: "",
                plan_title: "",
                areaid: "",
                areaname: "",
                gen_type: "",
                iszq: true,
                newList: [],
                checked: false,
                default_first_date: "",
                disabled: false,
                newRoleDialogVisible: false,
                plan_pop: "",
                roleDataList: [],
                kw: "",
                roleDataListLoading: false,
                RoleDataProps: {
                    label: 'role_name'
                },
                plan_pop_id: "",
                activeName: 'first',
                typeSelected: '',
                typeOption: [],
                list: [],
                loading: false,
                creator_id: '',
                creator_name: '',
                create_time: '',
                start_time: '',
                end_time: '',
                list2: [],
                kw2: '',
                status: '',
                kw_person: "",
                personLoading: false,
                personDlgList: [],
                newPersonDialogVisible: false,
                personDlgProps: {
                    children: 'children',
                    label: 'user_name'
                },
                personIdList: "",
                personNameList: "",
                phone: "",
                taskID: '',
                type2: '',
                i: 0,
                pops: [],
                personvalue: ''
            }
        },
        components: {},
        created() {
            this.type = this.$route.query.type;
            this.id = this.$route.query.id;
            this.ongetAreaTree();
            this.ongetTemplateList();
            if (this.type == "add") {
                document.title = "新增计划";
            } else if (this.type == "info") {
                this.readonly = true;
            } else if (this.type == "update") {
                document.title = "编辑计划";
                this.readonly = false;
                this.disabled = true;
            }
        },
        computed: {},
        watch: {
            kw(val) {
                this.$refs.roleData.filter(val);
            }
        },
        filters: {
            status(val) {
                let type = {
                    "1": "待处理",
                    "2": "处理中",
                    "3": "整改中",
                    "4": "已完成",
                    "5": "逾期",
                }
                return type[val];
            }
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.role_name.indexOf(value) !== -1;
            },
            add() {
                let vm = this;
                let params = {
                    "area_range": vm.areaid,
                    "deadline": Number(vm.deadline),
                    "finish_rate": Number(vm.finish_rate).toFixed(2),
                    "first_date": vm.first_date,
                    "gen_type": vm.gen_type,
                    "plan_cycle": Number(vm.plan_cycle),
                    "plan_title": vm.plan_title,
                    "template_id": vm.template_id
                }
                if (vm.checkNum <= 0) {
                    vm.$message.info("执行范围最少为一个小区！");
                    return;
                }
                if (vm.gen_type == 1 && (Number(vm.deadline) > Number(vm.plan_cycle))) {
                    vm.$message.info("选择周期性任务时期限不能超过周期！");
                    return;
                }
                if (vm.checked) {
                    vm.$confirm(`是否立即创建 [ ${vm.plan_title} ] 内的任务？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        addPlan(params).then(response => {
                            let res = response.data;
                            vm.$message.success("计划创建成功！");
                            if (res.data_id) {
                                createTask(res.data_id).then(response => {
                                    vm.$message.success("任务创建成功！");
                                    vm.back();
                                }).catch(error => {
                                    vm.$message.error("任务创建失败！" + error.response.data.error_msg);
                                })
                            }
                        }).catch(error => {
                            vm.$message.error("计划创建失败！" + error.response.data.error_msg);
                        })
                    }).catch(() => {
                    });
                } else {
                    addPlan(params).then(response => {
                        vm.$message.success("计划创建成功！");
                        vm.back();
                    }).catch(error => {
                        vm.$message.error("执行失败！" + error.response.data.error_msg);
                    })
                }
            },
            update() {
                let vm = this;
                let params = {
                    "area_range": vm.areaid,
                    "deadline": Number(vm.deadline),
                    "finish_rate": Number(vm.finish_rate).toFixed(2),
                    "first_date": vm.first_date,
                    "gen_type": vm.gen_type,
                    "plan_cycle": Number(vm.plan_cycle),
                    "plan_title": vm.plan_title,
                    "template_id": vm.template_id
                }
                if (vm.checkNum <= 0) {
                    vm.$message.info("执行范围最少为一个小区！");
                    return;
                }
                if (vm.gen_type == 1 && (Number(vm.deadline) > Number(vm.plan_cycle))) {
                    vm.$message.info("选择周期性任务时期限不能超过周期！");
                    return;
                }
                if (vm.checked) {
                    vm.$confirm(`是否立即创建 [ ${vm.plan_title} ] 内的任务？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        updatePlan(params, vm.id).then(response => {
                            vm.$message.success("计划修改成功！");
                            createTask(vm.id).then(response => {
                                vm.$message.success("任务创建成功！");
                                vm.back();
                            }).catch(error => {
                                vm.$message.error("任务创建失败！" + error.response.data.error_msg);
                            })
                        }).catch(error => {
                            vm.$message.error("计划修改失败！" + error.response.data.error_msg);
                        })
                    }).catch(() => {
                    });
                } else {
                    updatePlan(params, vm.id).then(response => {
                        vm.$message.success("计划修改成功！");
                        vm.back();
                    }).catch(error => {
                        vm.$message.error("计划修改失败！" + error.response.data.error_msg);
                    })
                }
            },
            back() {
                this.$router.go(-1);
            },
            ongetTemplateList() {
                let vm = this;
                let params = {
                    page_num: 1,
                    page_size: 10000
                }
                getTemplateList(params).then(response => {
                    let res = response.data;
                    vm.template = res.rows;
                }).catch(error => {
                    vm.$message.error("执行失败！" + error.response.data.error_msg);
                })
            },
            getAreaInfo() {
                let vm = this;
                let areas = vm.$refs.region.getCheckedNodes();
                let areaids = "", areanames = "", num = 0;
                for (let i = 0; i < areas.length; i++) {
                    if (areas[i].level == 3) {
                        areaids += areas[i].value + ',';
                        areanames += areas[i].label + ',';
                        num++;
                    }
                }
                vm.areaname = areanames.substring(0, areanames.length - 1);
                vm.areaid = areaids.substring(0, areaids.length - 1);
                vm.checkNum = num;
                vm.proportionNum = ((num / vm.totalNum) * 100).toFixed(2) + '%';
            },
            ongetAreaTree() {
                let vm = this;
                getAreaTree().then(response => {
                    let res = response.data;
                    let num = 0;
                    vm.treeData = res;
                    for (let i = 0; i < res.length; i++) {
                        vm.onGetArr(res[i]);
                    }
                    for (let i = 0; i < vm.newList.length; i++) {
                        if (vm.newList[i].level == 3) {
                            num++;
                        }
                    }
                    vm.totalNum = num;
                    if (vm.type == 'info' || vm.type == 'update') {
                        vm.info();
                    }
                }).catch(error => {
                    vm.$message.error("执行失败！" + error.response.data.error_msg);
                })
            },
            onGetArr(e) {
                let vm = this;
                vm.newList.push(e);
                if (e.children) {
                    for (let i = 0; i < e.children.length; i++) {
                        vm.onGetArr(e.children[i]);
                    }
                }
            },
            info() {
                let vm = this;
                infoPlan(vm.id).then(response => {
                    let res = response.data;
                    vm.areaid = res.area_range;
                    vm.$refs.region.setCheckedKeys(res.area_range.split(','));
                    vm.deadline = res.deadline;
                    vm.finish_rate = res.finish_rate;
                    vm.first_date = res.first_date;
                    vm.default_first_date = res.first_date;
                    vm.gen_type = res.gen_type;
                    vm.plan_cycle = res.plan_cycle;
                    vm.plan_title = res.plan_title;
                    vm.template_id = res.template_id;
                    vm.creator_name = res.creator_name;
                    vm.create_time = res.create_time;
                    vm.creator_id = res.creator_id;
                    vm.start_time = res.start_time;
                    vm.end_time = res.end_time;
                    vm.status = res.status == 1 ? '已完成' : '未完成';
                    vm.plan_pop = res.supervisorrole_name;
                    vm.plan_pop_id = res.supervisorrole_id;

                    vm.pops = [];
                    let types = res.stTypename.split(',');//类型名称
                    let deals = res.dealroleName.split(',');//处理人
                    let charges = res.chargeroleName.split(',');//责任人
                    for (let i = 0; i < types.length; i++) {
                        vm.pops.push({
                            type: types[i],
                            deal: deals[i],
                            charge: charges[i]
                        });
                    }
                }).catch(error => {
                    vm.$message.error("执行失败！" + error.response.data.error_msg);
                })
            },
            checkedChange(val) {
                if (val) {
                    this.first_date = new Date();
                } else {
                    this.first_date = this.default_first_date;
                }
            },
            changeType(val) {
                if (val == 1) {
                    this.checked = false;
                }
            },
            showRole() {
                this.roleDataList = [];
                this.newRoleDialogVisible = true;
                this.kw = '';
                this.getRoleList();
            },
            getRoleList() {
                let vm = this;
                let params = {
                    page_num: 1,
                    page_size: 1000
                };
                vm.roleDataListLoading = true;
                getRoleList(params)
                    .then(response => {
                        let res = response.data;
                        vm.roleDataList = res.rows;
                        vm.roleDataListLoading = false;
                    })
                    .catch(error => {
                        vm.roleDataListLoading = false;
                    })
            },
            setDeptRoleInfo() {
                let checkNode = this.$refs.roleData.getCheckedNodes();
                let roleid = new Array(checkNode.length);
                let rolename = new Array(checkNode.length);
                for (let i = 0; i < checkNode.length; i++) {
                    roleid[i] = checkNode[i].role_id;
                    rolename[i] = checkNode[i].role_name;
                }
                this.plan_pop = rolename.join(',');
                this.plan_pop_id = roleid.join(',');
                this.newRoleDialogVisible = false;
            },
            handleClick(a, b) {
                if (a.name == "first") {
                    this.info();
                } else {
                    this.ongetTypeList();
                    this.oninfoPlanTask();
                }
            },
            goinfo(id) {
                this.$router.push({
                    path: "tasklistMGTComonentsDetail",
                    query: {
                        type: "info",
                        id: id
                    }
                })
            },
            search() {
                this.oninfoPlanTask();
            },
            oninfoPlanTask() {
                let vm = this;
                let params = {
                    page_num: 1,
                    page_size: 999,
                    type_id: vm.typeSelected,
                    keyword: vm.kw2
                }
                vm.loading = true;
                infoPlanTask(vm.id, params).then(response => {
                    let res = response.data;
                    vm.list2 = res.rows;
                    vm.loading = false;
                }).catch(error => {
                    vm.loading = false;
                })
            },
            ongetTypeList() {
                let vm = this;
                let params = {
                    page_num: 1,
                    page_size: 999
                }
                getTypeList(params).then(response => {
                    let res = response.data;
                    vm.typeOption = res.rows;
                }).catch(error => {
                    vm.$message.error("执行失败！" + error.response.data.error_msg);
                })
            },
            onSearchPerson() {//人员查询
                let vm = this;
                if (vm.kw_person) {
                    let params = {
                        page_num: 1,
                        page_size: 50,
                        kw: vm.kw_person,
                    };
                    vm.personLoading = true;
                    getStaffList(params).then(response => {
                        let res = response.data;
                        vm.personDlgList = res.rows;
                        vm.personLoading = false;
                        this.refreshUserTree();
                    }).catch(error => {
                        vm.personLoading = false;
                    })
                } else {
                    vm.onGetPersonList();
                }
            },
            getPerson(task_id, type, selusers, selids, selphones) {
                this.taskID = task_id;
                this.type2 = type;
                //已经选择的人员
                this.personNameList = selusers;
                this.personIdList = selids;
                this.phone = selphones;
                this.newPersonDialogVisible = true;
                this.onGetPersonList();
            },
            onGetPersonList() {//拉取人员
                let vm = this;
                let params = {
                    page_num: 1,
                    page_size: 50,
                    kw: vm.kw_person,
                    // area_id:vm.areaIds
                };
                vm.personLoading = true;
                //查询加载员工用户
                getStaffList(params).then(response => {
                    let res = response.data;
                    vm.personDlgList = res.rows;
                    vm.personLoading = false;
                    this.refreshUserTree();
                }).catch(error => {
                    vm.personLoading = false;
                })

            },
            refreshUserTree() {
                let vm = this;
                if (vm.personIdList.length <= 0) {
                    return;
                }
                let staff_id = vm.personIdList.split(",");
                //更新tree状态
                vm.$refs.personDlg.setCheckedKeys(staff_id);
            },

            //删除指派的处理人
            deleteDealer(delusername) {
                let vm = this;
                let user_name = vm.personNameList.split(',');
                let phone = vm.phone.split(',');
                let staff_id = vm.personIdList.split(',');
                for (let i = 0; i < user_name.length; i++) {
                    if (user_name[i] == delusername) {
                        user_name.splice(i, 1);
                        phone.splice(i, 1);
                        staff_id.splice(i, 1);
                        break;
                    }
                }
                //更新tree状态
                let person = vm.$refs.personDlg.getCheckedNodes();
                if (person.length > 0) {
                    for (let i = 0; i < person.length; i++) {
                        if (person[i].user_name == delusername) {
                            vm.$refs.personDlg.setChecked(person[i], false, false);
                        }
                    }
                }

                if (staff_id.length > 0) {
                    vm.personIdList = staff_id.join(",");
                    vm.personNameList = user_name.join(",");
                    vm.phone = phone.join(",");
                } else {
                    vm.personIdList = vm.personNameList = vm.phone = "";
                }
            },
            onChange(data, checked, indeterminate) {
                //选择节点发生变化
                let vm = this;
                let user_name = (vm.personNameList.length > 0) ? vm.personNameList.split(',') : [];
                let phone = (vm.phone.length > 0) ? vm.phone.split(',') : [];
                let staff_id = (vm.personIdList.length > 0) ? vm.personIdList.split(',') : [];

                if (!checked) {
                    for (let i = 0; i < user_name.length; i++) {
                        if (user_name[i] == data.user_name) {
                            user_name.splice(i, 1);
                            phone.splice(i, 1);
                            staff_id.splice(i, 1);
                        }
                    }
                } else {
                    if (vm.personIdList.indexOf(data.staff_id) == -1) {
                        staff_id.push(data.staff_id);
                        user_name.push(data.user_name);
                        phone.push(data.phone);
                    }
                }
                console.log(staff_id, user_name, phone);
                vm.personIdList = staff_id.join(",");
                vm.personNameList = user_name.join(",");
                vm.phone = phone.join(",");
            },

            handlePersonClick() {//确认人员
                let vm = this;
                /*
                let person = vm.$refs.personDlg.getCheckedNodes();
                if (person.length > 0) {
                    //let staff_id = [], user_name = [], phone = [];
                    let user_name = vm.personNameList.split(',');
                    let phone = vm.phone.split(',');
                    let staff_id = vm.personIdList.split(',');
                    for (let i = 0; i < person.length; i++) {
                        staff_id.push(person[i].staff_id);
                        user_name.push(person[i].user_name);
                        phone.push(person[i].phone);
                    }
                    vm.personIdList = staff_id.join(',');
                    vm.personNameList = user_name.join(',');
                    vm.phone = phone.join(',');
                } else {
                    // vm.personIdList = "";
                    // vm.personNameList = "";
                    // vm.phone = "";
                    // vm.$message.info("执行失败，改派的人员不能为空！");
                    return;
                }
                */

                if (vm.personIdList == "") {
                    vm.$message.info("执行失败，改派的人员不能为空！");
                    return;
                }

                vm.$confirm(`确定改派给:${vm.personNameList}?`).then(_ => {
                    let params = {
                        "dealer_id": vm.personIdList,
                        "dealer_name": vm.personNameList,
                        "dealer_phone": vm.phone,
                    }
                    if (vm.type2 == 1) {
                        reassignment(params, vm.taskID).then(response => {
                            vm.$message.success("执行成功！");
                            vm.oninfoPlanTask();
                        }).catch(error => {
                            vm.$message.error("执行失败！" + error.response.data.error_msg);
                        })
                    } else if (vm.type2 == 2) {
                        reassignmentDealer(params, vm.taskID).then(response => {
                            vm.$message.success("执行成功！");
                            vm.oninfoPlanTask();
                        }).catch(error => {
                            vm.$message.error("执行失败！" + error.response.data.error_msg);
                        })
                    }
                    vm.newPersonDialogVisible = false;
                }).catch(_ => {
                });
            },

            renderContent: function (createElement, {node, data, store}) {
                var vm = this;
                return createElement(
                    'div',
                    {
                        attrs: {
                            style: "width:100%",
                            title: `联系方式：${node.data.phone}`
                        }
                    },
                    [
                        createElement('span', node.label),
                        createElement('span',
                            {
                                attrs: {
                                    style: "float: right; margin-right: 20px"
                                }
                            },
                            `${node.data.dept_name}`
                        )
                    ]
                );
            },
        }
    }
</script>

